<script setup lang="ts">
import { onMounted, ref } from "vue";
import { BookMark, keyType } from "@/comm/BookMark";
import JEmpty from "@/components/j-empty/index.vue";
import { onOpen, BtnType } from "../scripts/JBookMark";
import BookMarkImg from "@/components/j-svg/bookMarkImg.vue";

const listArr = ref<string[]>([]);
function setData() {
    listArr.value = new BookMark(keyType.CleverMoney).getData();
}

function onDown(address: string) {
    const isDel = new BookMark(keyType.CleverMoney).delDate(address);
    if (isDel) {
        setData();
    } else {
        console.log("删除失败！");
    }
}
onMounted(() => {
    setData();
});
</script>

<template>
    <ul class="tabC bdy c-title-4 overflow-y-auto">
        <li class="d-flex align-center" v-for="item in listArr" :key="item">
            <!-- <VIcon @click="() => onDown(item)" size="15">mdi mdi-star</VIcon>&nbsp; -->
            <BookMarkImg @click="() => onDown(item)"></BookMarkImg>&nbsp;
            <span @click="() => onOpen(BtnType.CleverMoney, item.slice(item.indexOf('?') + 1))" class="coin-link">{{ item.slice(0, item.indexOf("?")) }}</span>
        </li>
        <JEmpty v-if="listArr.length === 0" />
    </ul>
</template>

<style lang="less" scoped>
.tabC {
    height: 100%;
    max-height: 100%;

    li {
        list-style: none;
        height: 20px;
    }

    li:not(:first-child) {
        margin-top: 15px;
    }
    :deep(#sc) {
        fill: var(--main);
    }
}
</style>
